<template>
  <div class="mine">
      <div class="header">
          <div class="account">
              <div class="touxiang"><img src="@/assets/img7.png" alt=""></div>
              <div class="username">
                  <h1>ONIMI.BASS</h1>
                  <span>183****0701</span>
              </div>

          </div>
          <div class="follow">
              <ul class="follow_nav">
                  <li>
                      <b>收藏夹</b>
                      <span>190</span>
                  </li>
                  <li>
                      <b>关注店铺</b>
                      <span>37</span>
                  </li>
                  <li>
                      <b>足迹</b>
                      <span>99</span>
                  </li>
                  <li>
                      <b>卡卷</b>
                      <span>2</span>
                  </li>
              </ul>
          </div>
      </div>
      <div class="main">
          <div class="order">
              <h3>我的订单</h3>
              <ul class="nav">
                  <li>
                      <i class="iconfont">&#xee8d;</i>
                      <span>待付款</span>
                  </li>
                  <li>
                      <i class="iconfont">&#xee8f;</i>
                      <span>待收货</span>
                  </li>
                  <li>
                      <i class="iconfont">&#xee9f;</i>
                      <span>已完成</span>
                  </li>
                  <li>
                      <i class="iconfont">&#xee97;</i>
                      <span>退款/售后</span>
                  </li>
              </ul>
          </div>
          <div class="tools">
              <h3>常用工具</h3>
              <van-grid :border="false" icon-color="red" >
                <van-grid-item icon="location-o"  text="收货地址" to="/address" />
                <van-grid-item icon="star-o" text="我的地址" />
                <van-grid-item icon="calendar-o" text="签到中心" />
                <van-grid-item icon="bill-o" text="领券中心" />
                <van-grid-item icon="user-o" text="客服" />
                <van-grid-item icon="tv-o" text="店铺直播" />
                <van-grid-item icon="setting-o" text="设置" />
                </van-grid>
          </div>
          <van-divider :style="{color:'#ccc', margin:'30px'}">为你推荐</van-divider>
        <van-list
            v-model="loading"
            :finished="isEnd"
            finished-text="没有更多了"
            >
            <van-card
                v-for="item in prod"
                :key="item.id"
                :price="item.price | money"
                :origin-price="item.originPrice | money"
                :thumb="item.image"
                @click="jumpToDetail(item.id)"
            >
        <!-- 自定义标题插槽，显示一行标题文本 -->
        <template #title>
          <div class="van-multi-ellipsis--l2">{{ item.title }}</div>
        </template>
        <!-- 自定义描述下方的标签，显示优惠券、包邮 -->
        <template #tags>
          <van-tag plain type="primary" color="#f00" v-if="item.couponValue" style="margin-right: 6px;">
            {{ item.couponValue }}
          </van-tag>
          <van-tag plain type="primary" color="#f00" v-if="item.isFreePostage">
            包邮
          </van-tag>
        </template>
      </van-card>
    </van-list>
    <van-divider :style="{color:'#ccc', margin:'30px'}">没有更多了</van-divider>
      </div>

  </div>
</template>

<script>
import { getHots } from '@/api/home'
export default {
  name: 'Mine',
  data() {
    return {
      products: [], // 推荐商品
      nextIndex: 0, // 下一页推荐商品查询起始索引
      loading: true, // 商品列表是否正在加载列表数
    }
  },
  async created() { // 实例创建后，立即发送网络请求
    try {
      const [
        // { list: banners },
        { list: products, isEnd, nextIndex },
      ] = await Promise.all([
        // getBanners(),
        getHots(),
      ])
      // 修改 data 数据，以响应式渲染
      // this.banners = banners
      this.products = products

      this.count = products.splice(10, 1)
      this.hot = products.splice(5, 1)
      this.nextIndex = nextIndex
      this.isEnd = isEnd
      this.loading = false
      this.prod = products.splice(0, 6)
    } catch (error) {
      console.error('有错误：', error)
    }
  },
  mounted() {
    document.querySelector('main').onscroll = e => {
      this.visible = e.target.scrollTop >= 500
    }
  },
  beforeDestroy() {
    // 组件销毁时，应该移除在DOM节点上绑定的事件
    document.querySelector('main').onscroll = null
  },
  methods: {
    // 跳转到详情页面
    jumpToDetail(id) {
      this.$router.push('/detail/' + id)
    },
    // 跳转到限时折扣页面
    jumpToDiscount() {
      this.$router.push('/discount/')
    },
    // 跳转到分类页面
    jumpToCategory() {
      this.$router.push('/category/')
    },
  },
}
</script>

<style lang="less" scoped>
    html,body{
        width: 100%;
    }
    .mine{
        width: 100%;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        background-color: #c1ab96;
        .header{
            width: 100%;
            height: 30%;
            overflow: hidden;
            background-color: #c1ab96;
            .account{
                height: 150px;
                margin-top: 60px;
                .touxiang{
                    width: 200px;
                    height: 150px;
                    float: left;
                }
                .username{
                    width: 100px;
                    height: 20px;
                    float: left;
                    margin-left: -50px;
                    margin-bottom: 30px;
                    h1{
                        line-height: 40px;
                        color: #fff;
                    }
                    span{
                        font-size: 14px;
                        color: #fff;
                        float: left;
                        margin-left: 80px;
                        font-weight: 700;
                    }
                }
            }
            .follow{
                width: 100%;
                height: 120px;
                margin-top: 50px;
                .follow_nav{
                    width: 100%;
                    height: 100px;
                    display: flex;
                    li{
                        flex: 1;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-around;
                        align-items: center;
                        font-size: 14px;
                        color: #fff;
                    }
                }
            }
        }
        .main{
            flex: 1;
            border-radius: 30px 30px 0 0;
            background-color: #fff;

            .order{
                height: 160px;
                margin-top: 30px;
                h3{
                    position: relative;
                    top: 10px;
                    left: 30px;
                    font-size: 16px;
                    font-weight: 900;
                }
                .nav{
                    display: flex;
                    margin-top: 10px;
                    li{
                        flex: 1;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        font-size: 12px;
                        i{
                            font-size: 30px;
                            color: #f4e2cd;
                        }
                    }

                }
            }
            .tools{
                width: 100%;
                height: 360px;
                margin-top: 30px;
                h3{
                    position: relative;
                    top: 30px;
                    left: 30px;
                    font-size: 16px;
                    font-weight: 900;
                }
            }
            .van-divider{
                font-size: 16px;
                font-weight: 900;
            }
            .van-divider::before{
                height: 3px;
                border-color: #ccc;
                font-weight: 900;
                font-size: 18px;
            }
            .van-divider::after{
                height: 3px;
                border-color: #ccc;
                font-weight: 900;
                font-size: 18px;
            }
            .van-card{
                width: 50%;
                float: left;
                height: 300px;
                .van-card__thumb{
                    width: 100%;
                    height: 60%;
                    position: relative;

                }
                .van-card__header{
                    display: block;
                    position: absolute;
                    width: 185px;
                    height: 200px;
                    left: 0;
                }
                .van-card__thumb img{
                    border-radius: 2px;
                }
                .van-card__content{
                    width: 185px;
                    min-height: 88px;
                    position: absolute;
                    right: 0;
                    top: 200px;
                    bottom: 0;
                    border-radius: 0 0 20px 20px;
                }

            }
        }
    }
</style>
